var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
var customer = new i18nMessage('../../servlet/BiFranceCustomerServlet?action=5');
var ctAccessoryType = new i18nMessage('../../servlet/CodeTableServlet?name=CtAccessoryType');
var ctApplicationType = new i18nMessage('../../servlet/CodeTableServlet?name=CtApplicationType');
var ctMaterialType = new i18nMessage('../../servlet/CodeTableServlet?name=CtMaterialType');
var ctSupplyType = new i18nMessage('../../servlet/CodeTableServlet?name=CtSupplyType');
var ctYesno = new i18nMessage('../../servlet/CodeTableServlet?name=CtYesno');
var ctBrand = new i18nMessage('../../servlet/CodeTableServlet?name=CtBrand');
var productAccessoryOthersStore;
var productAccessoryOthersGrid;
var productAccessoryOthersWindow;
var selectProductAccessoryOthersCallback;
var selectedProductAccessoryOthers;
function locateProductAccessoryOthers(rowIndex){
	selectedProductAccessoryOthers = productAccessoryOthersStore.getAt(rowIndex).data;
}
var selectProductAccessoryOthers = function(selectCallback, piId){
	selectProductAccessoryOthersCallback = selectCallback;
    if (!productAccessoryOthersWindow) {
        productAccessoryOthersWindow = new Ext.Window({
            title: message.get('message.combo.pleaseselect'),
            layout: 'fit',
            width: 800,
            height: 605,
            closeAction: 'hide',
            plain: true,
            modal: true,
            items: [{
                id: 'productAccessoryOthersPanel',
                region: 'center',
                bodyStyle: {
                    background: '#ffffff',
                    padding: '7px'
                },
                html: '<div id="selectAccessoryOthresDiv"></div>'
            }]
        });
    }
    productAccessoryOthersWindow.show();
    
    if (productAccessoryOthersGrid) {
		productAccessoryOthersStore.reload();
		return;
	}
    productAccessoryOthersStore = new Ext.data.Store({
        url: '../../servlet/ProductAccessoryOthersServlet?action=6&id=' + piId,
                    
        reader: new Ext.data.XmlReader({
            record: 'item',
            id: 'id',
            totalRecords: 'itemTotal'
        }, [ 
        'index', 'applicationReference', 'accessoryReference', 'ctApplicationType', 'ctAccessoryType','ctAccessoryTypeCode', 'ctMaterialType', 
		'ctSupplyType','ctSupplyTypeCode','isApplication', 'comment','ctUnit',
		 'photo1Name', 'photo2Name',{
		 	name: 'biFranceCustomer.name',
		 	mapping: 'customerName'
		 }, {
		 	name: 'biFranceCustomer.department',
		 	mapping: 'customerDepartment'
		 }, 'factoryNameCN','factoryNameEN', 
		 'ctCareLabelMaterial1', 'percentage1', 
		 'ctCareLabelMaterial2', 'percentage2', 
		 'ctCareLabelMaterial3', 'percentage3', 
		 'ctCareLabelMaterial4', 'percentage4', 
		 'ctCareLabelMaterial5', 'percentage5', 
		 'descriptionCN','descriptionFR','descriptionEN'
		 ,'customerReference', 'customerColor',
		 'factoryReference', 'addressFactory', 'factoryColor','id']),
        
        remoteSort: false
    });
    
    productAccessoryOthersStore.setDefaultSort('index', 'asc');
    
   var aoFilters = new Ext.grid.GridFilters({
		  filters:[
		    
	]});
    
    function renderSelectItem(value, p, record, rowIndex){
        return String.format('<a href="javascript: locateProductAccessoryOthers({16});selectProductAccessoryOthersCallback(\'{0}\', \'{1}\',\'{2}\', \'{3}\',\'{4}\', \'{5}\',\'{6}\', \'{7}\',\'{8}\', \'{9}\',\'{10}\', \'{11}\',\'{12}\', \'{13}\',\'{14}\', \'{15}\');productAccessoryOthersWindow.hide();"><img src="../../images/icons/arrow_rotate_clockwise.png" title="' + message.get('message.list.select') + '" /></a>', record.data.id, record.data.applicationReference,record.data.accessoryReference, record.data['biFranceCustomer.name'],record.data['biFranceCustomer.department'], record.data.customerReference, record.data.customerColor,record.data.factoryName,record.data.addressFactory, record.data.photo1Name, record.data.photo2Name, record.data.ctApplicationType, record.data.ctAccessoryType, record.data.ctAccessoryTypeCode, record.data.ctCareLabelMaterial1, record.data.percentage1, rowIndex);
    }
    
    var aoExpander = new Ext.grid.RowExpander({
        tpl : new Ext.XTemplate(
			'<br/><p><b>' + message.get('message.edit.materialtype') + ':</b>&nbsp;&nbsp;{ctMaterialType}',
			'</p><br/>',
			'<b>' + message.get('message.edit.factoryname') + ':</b>&nbsp;&nbsp;{factoryNameCN}&nbsp;&nbsp;&nbsp;&nbsp;{factoryNameEN}&nbsp;&nbsp;&nbsp;&nbsp;',
			//'<b>' + aoMessage.get('ui.accessoryothers.factoryreference') + ':</b>&nbsp;&nbsp;{factoryReference}&nbsp;&nbsp;&nbsp;&nbsp;',
			//'<b>' + aoMessage.get('ui.accessoryothers.factorycolor') + ':</b>&nbsp;&nbsp;{factoryColor}&nbsp;&nbsp;&nbsp;&nbsp;',
			'</p><br/>',
			'{[this.getCareLabel(values)]}',
        	'<p><img src="../../_temp/{photo1Name}" width="150px"/>&nbsp;&nbsp;&nbsp;&nbsp;',
			'<img src="../../_temp/{photo2Name}" width="150px"/>&nbsp;&nbsp;&nbsp;&nbsp;',
			'</p>', 
			'<br/><p><b>' + message.get('message.edit.descriptionfr') + ':</b> {descriptionFR}</p><br/>',
						'<br/><p><b>' + message.get('message.edit.descriptioncn') + ':</b> {descriptionCN}</p><br/>',
						'<br/><p><b>' + message.get('message.edit.descriptionen') + ':</b> {descriptionEN}</p><br/>',{
						     getCareLabel: function(values){
						     	 var rtn = '';
						     	 rtn += '<p>';
							     if(values.ctCareLabelMaterial1 != ''){
									 rtn += '<b>' + aoMessage.get('ui.accessoryothers.set3') + '1:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial1 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
									 rtn += message.get('message.edit.precentage') + '1&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage1
							     }
							     if(values.ctCareLabelMaterial2 != ''){
									 rtn += '<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +aoMessage.get('ui.accessoryothers.set3') + '2:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial2 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
									 rtn += message.get('message.edit.precentage') + '2&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage2
							     }
							     if(values.ctCareLabelMaterial3 != ''){
									 rtn += '<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +aoMessage.get('ui.accessoryothers.set3') + '3:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial3 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
									 rtn += message.get('message.edit.precentage') + '3&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage3
							     }
							     if(values.ctCareLabelMaterial4 != ''){
									 rtn += '<br/><br/><b>' + aoMessage.get('ui.accessoryothers.set3') + '4:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial4 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
									 rtn += message.get('message.edit.precentage') + '4&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage4
							     }
							     if(values.ctCareLabelMaterial5 != ''){
									 rtn += '<b>&nbsp;&nbsp;&nbsp;&nbsp;' + aoMessage.get('ui.accessoryothers.set3') + '5:</b>&nbsp;&nbsp;'+ values.ctCareLabelMaterial5 + '&nbsp;&nbsp;&nbsp;&nbsp;<b>'
									 rtn += message.get('message.edit.precentage') + '5&nbsp;(%):</b>&nbsp;&nbsp;'+ values.percentage5
							     }
							     rtn += '</p><br/>'
							     return rtn;
					         
					     }
						}
        )
    });
    
    // create the grid
    productAccessoryOthersGrid = new Ext.grid.GridPanel({
        title: aoMessage.get('ui.accessoryothers.listtitle'),
        store: productAccessoryOthersStore,
        stripeRows: true,
        plugins: [aoFilters, aoExpander],
        height: 560,
        columns: [aoExpander,
        /*{
            header: message.get('message.list.id'),
            width: 50,
            dataIndex: 'index',
            sortable: false
        },*/
        {
            header: message.get('message.edit.buyer'),
            dataIndex: 'ctSupplyType',
            sortable: true
        },{
            header: aoMessage.get('ui.accessoryothers.application'),
            dataIndex: 'ctApplicationType',
            sortable: true
        },{
            header: aoMessage.get('ui.accessoryothers.reference'),
            dataIndex: 'applicationReference',
            sortable: true
        },{
            header: aoMessage.get('ui.accessoryothers.type'),
            dataIndex: 'ctAccessoryType',
            sortable: true
        },{
            header: aoMessage.get('ui.accessoryothers.reference'),
            dataIndex: 'accessoryReference',
            sortable: true
        },{
            header: fcMessage.get('ui.francecustomer.name'),
            dataIndex: 'biFranceCustomer.name',
            sortable: true
        },{
            header: fcMessage.get('ui.francecustomer.department'),
            dataIndex: 'biFranceCustomer.department',
            sortable: true
        },{
            header: aoMessage.get('ui.accessoryothers.customerreference'),
            dataIndex: 'customerReference',
            sortable: true
        },{
            header: aoMessage.get('ui.accessoryothers.customercolor'),
            dataIndex: 'customerColor',
            sortable: true
        }, {
            header: message.get('message.list.select'),
            width: 30,
            dataIndex: 'id',
            sortable: false,
            renderer: renderSelectItem
        }],
        viewConfig: {
            forceFit: true
        },
        loadMask: true,
        renderTo: 'selectAccessoryOthresDiv',
        bbar: new Ext.PagingToolbar({
            pageSize: 99999,
            store: productAccessoryOthersStore,
            displayInfo: true
        })
    });
    
    var startPage = getPrarmeterValue(window.location, 'startPage');
    var start;
    if (startPage == null || startPage == '') {
        start = 0;
    }
    else {
        start = (startPage - 1) * 20;
    }
    productAccessoryOthersStore.load({
        params: {
            start: start,
            limit: 9999
        }
    });
}

